<div class="row">
    <h3 class="page-title">
       Team - <strong> Create </strong> 
    </h3>
    <div class="col-lg-12">
        <section class="widget">
            <div class="widget-body">
                <legend>
                    <button type="button" class="btn btn-info btn-sm pull-left" ng-click="back()">
                        <i class="fa fa-backward"></i>
                        <span>Back</span>
                    </button>
                </legend>
                <div class="row">
                    <div class="col-md-2">Create Team</div>
                    <div class="col-md-7" style="border-left:1px solid #e5e5e5;padding:0 30px;margin-bottom: 30px;">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-xs-12 " ng-click="gotoCreate()" style="cursor: pointer; padding-right:30px;">
                                <section class="widget step-actived" style="padding: 3px 10px;">
                                    <div class="widget-body clearfix">
                                        <div class="row flex-nowrap">
                                            <div class="col-xs-3">
                                                <span class="widget-icon">
                                                  <i class="fa fa-users"></i>
                                                </span>
                                            </div>
                                            <div class="col-xs-9">
                                                <h6 class="no-margin">Step 1</h6>
                                                <p class="h4 no-margin fw-normal">Create Team</p>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                            <div class="col-lg-6 col-md-6 col-xs-12 " style="padding-left:30px;">
                                <section ng-class="{widget:true, 'step-todo':step=='basicInfo','step-actived':step=='inviteMember'}" style="padding: 3px 10px;">
                                    <div class="widget-body clearfix">
                                        <div class="row flex-nowrap">
                                            <div class="col-xs-3">
                                                <span class="widget-icon">
                                      <i class="fa fa-user"></i>
                                    </span>
                                            </div>
                                            <div class="col-xs-9">
                                                <h6 class="no-margin">Step 2</h6>
                                                <p class="h4 no-margin fw-normal">Invite Members</p>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                        <form novalidate="novalidate" ng-show='step == "basicInfo"' name="TeamCreateForm">
                            <fieldset>
                                <div class="form-group">
                                    <label>Select Organiztion</label>
                                    <select class="select2 form-control" ng-model="selectedOrg.name" >
                                        <option value="{{org.name}}" ng-repeat="org in orgs">{{ org.name }}</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Name</label>
                                    <input type="text" name="nameInput" placeholder="" class="form-control" ng-model="team.name"  ng-pattern="/^[A-Za-z0-9\-]+$/" ng-maxlength="25" required autofocus>
                                   <!--  <span class="help-block">Name can contain any letters or numbers, without spaces</span> -->
                                    <span class="form-error" ng-show="TeamCreateForm.$submitted || TeamCreateForm.nameInput.$touched">
                                        <span ng-if="TeamCreateForm.nameInput.$error.required">Name is required</span>
                                        <span ng-if="TeamCreateForm.nameInput.$error.pattern">Name must contains character and nubmer only</span>
                                        <span ng-if="TeamCreateForm.nameInput.$error.maxlength">Name mixmun length is 25 letters</span>
                                    </span>
                                </div>
                                <div class="form-group">
                                    <label>Description</label>
                                    <textarea class="form-control" rows="3" ng-model="team.description"></textarea>
                                </div>
                                <div class="form-group">
                                    <div class="radio radio-danger" style="display: inline-block;margin-right: 20px">
                                        <label>
                                            <input type="radio" name="team-type" value="public" ng-model="team.type"> Public
                                        </label>
                                    </div>
                                    <div class="radio radio-danger" style="display: inline-block;">
                                        <label>
                                            <input type="radio" name="team-type" value="private" ng-model="team.type"> Private
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-info" ng-click="save()" ng-disabled="TeamCreateForm.$invalid || TeamCreateForm.$pending">Create Team</button>
                                </div>
                            </fieldset>
                        </form>
                        <form novalidate="novalidate" ng-show='step == "inviteMember"' name="InviteMemberForm">
                            <div class="form-group">
                                <label for="bar">Invite members to team: &nbsp;<span style="font-size:20px;color:#5dc4bf">{{team.name}}</span></label>
                                <div class="input-group">
                                    <input type="text" name="memberInput" class="form-control" placeholder="Invite new member by username or email" ng-model="newMember" ng-enter="saveMember(team.name)" >
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-success" ng-click="saveMember(team.name)"><i class="fa fa-plus"></i></button>
                                    </div>
                                    
                                </div>
                               <!--  <span class="form-error" ng-show="!newMemberValidated">
                                        <span ng-if="InviteMemberForm.memberInput.$error.required"> Member name is required</span>
                                       
                                </span> -->
                            </div>
                        </form>
                        <div class="form-group row" ng-show='step == "inviteMember"'>
                            <div class="col-md-12">
                                <section class="widget" style="padding-left:0;">
                                    <header>
                                        <span class="label label-warning"><i class="fa fa-user"></i></span> &nbsp;Members
                                    </header>
                                    <div class="widget-body">
                                        <ul class="list-group">
                                            <li class="list-group-item" ng-repeat="member in members track by $index">{{member}}
                                              <i class="fa fa-remove pull-right" style="color:#ccc;cursor:pointer;" ng-click="removeMember(member)"></i>
                                            </li>
                                        </ul>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
